import React, { useContext, useEffect, useState } from 'react'
import { SidebarContext } from '../contexts/SidebarContext'
import { Link, useLocation } from 'react-router-dom'
import { getDictByKey } from '../api'
import 'remixicon/fonts/remixicon.css'

const Sidebar: React.FC = () => {
  const { isCollapsed, toggleSidebar } = useContext(SidebarContext)
  const location = useLocation()
  const currentPath = location.pathname
  const [showAbout, setShowAbout] = useState(false)

  const isActive = (path: string) => {
    if (path === '/') {
      return currentPath === path
    }
    return currentPath.startsWith(path)
  }

  useEffect(() => {
    const fetchDict = async () => {
      try {
        const res: any = await getDictByKey('is_show_about')
        if (res && res?.data?.value?.isShow !== undefined) {
          setShowAbout(res?.data?.value?.isShow)
        }
      } catch (error) {
        console.error('获取字典失败:', error)
      }
    }

    fetchDict()
  }, [])

  return (
    <nav className={`sidebar glass-card ${isCollapsed ? 'collapsed' : ''}`}>
      <button
        className="sidebar-toggle"
        id="sidebarToggle"
        onClick={toggleSidebar}
      >
        <i className="ri-arrow-left-s-line text-xl"></i>
      </button>
      <div className="mb-8">
        <h1 className="text-2xl font-bold">Blog</h1>
      </div>
      <div className="space-y-2">
        <Link
          to="/"
          className={`nav-link ${
            isActive('/home')
              ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
              : ''
          }`}
        >
          <i className="ri-home-line"></i>
          <span>首页</span>
        </Link>
        <Link
          to="/articles"
          className={`nav-link ${
            isActive('/articles')
              ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
              : ''
          }`}
        >
          <i className="ri-article-line"></i>
          <span>文章</span>
        </Link>
        <Link
          to="/picturebed"
          className={`nav-link ${
            isActive('/picturebed')
              ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
              : ''
          }`}
        >
          <i className="ri-image-line"></i>
          <span>图床</span>
        </Link>
        <Link
          to="/dict"
          className={`nav-link ${
            isActive('/dict')
              ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
              : ''
          }`}
        >
          <i className="ri-settings-line"></i>
          <span>字典</span>
        </Link>
        {showAbout && (
          <Link
            to="/about"
            className={`nav-link ${
              isActive('/about')
                ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
                : ''
            }`}
          >
            <i className="ri-user-line"></i>
            <span>关于</span>
          </Link>
        )}
        <Link
          to="/contact"
          className={`nav-link ${
            isActive('/contact')
              ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
              : ''
          }`}
        >
          <i className="ri-mail-line"></i>
          <span>联系</span>
        </Link>
      </div>
      <div className="mt-8 pt-8 border-t border-gray-700">
        <h2 className="text-lg font-semibold mb-4">分类</h2>
        <div className="space-y-2">
          <Link
            to="/category/tech"
            className={`nav-link ${
              isActive('/category/tech')
                ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
                : ''
            }`}
          >
            <i className="ri-code-line text-blue-400"></i>
            <span>技术</span>
          </Link>
          <Link
            to="/category/life"
            className={`nav-link ${
              isActive('/category/life')
                ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
                : ''
            }`}
          >
            <i className="ri-heart-line text-green-400"></i>
            <span>生活</span>
          </Link>
          <Link
            to="/category/thoughts"
            className={`nav-link ${
              isActive('/category/thoughts')
                ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
                : ''
            }`}
          >
            <i className="ri-lightbulb-line text-purple-400"></i>
            <span>思考</span>
          </Link>
        </div>
      </div>

      <div className="mt-8 pt-8 border-t border-gray-700">
        <h2 className="text-lg font-semibold mb-4">作品</h2>
        <div className="space-y-2">
          <a
            href="https://h5.prod.dahuangf.com/#imageBed"
            target="_blank"
            rel="noopener noreferrer"
            className={`nav-link ${
              isActive('/category/tech')
                ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
                : ''
            }`}
          >
            <i className="ri-image-line"></i>
            <span>大黄蜂图床</span>
          </a>
        </div>
      </div>
    </nav>
  )
}

export default Sidebar
